<script setup>

import {reactive} from "vue";

const props = defineProps({
  pageInfo: {
    type: Object,
    required: true,
    default: () => {
      return reactive({
        page: 1,
        size: 10,
        total: 0,
        list: []
      })
    }
  },
  query: {
    type: Function,
    required: true,
    default: (pageInfo) => {
    }
  },
  showHeader: {
    type: Boolean,
    default: false
  },
  height: {
    type: Number,
    default: 400
  },
  clickRow: {
    type: Function,
    default: () => {
    }
  },
  layout: {
    type: String,
    default: 'prev,pager,next,total'
  }
})
const pageInfo = reactive(props.pageInfo);

const changePage = (page) => {
  pageInfo.page = page
  props.query(pageInfo)
}
const changeSize = (size) => {
  props.pageInfo.size = size
  props.query(pageInfo)
}
</script>

<template>
  <el-table
      :data="pageInfo.list"
      :showHeader="showHeader"
      highlight-current-row
      @row-click="clickRow"
      :cell-style="{ 'text-align': 'center' }"
      :height="height">
    <slot></slot>
  </el-table>
  <el-pagination
      size="small"
      background
      :current-page="pageInfo.page"
      :page-size="pageInfo.size"
      :pager-count="5"
      :total="pageInfo.total"
      :layout="layout"
      @size-change="changeSize"
      @current-change="changePage"
  >
  </el-pagination>
</template>

<style scoped>

</style>